/**
* @Author: 李晨光
* @Date: 2019/12/17
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/17
**/
<comment>
  # 积分排行榜
</comment>
<template>
  <div id="Ranking" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        积分排行榜
      </mu-appbar>
    </div>
    <div class="select-box">
      <span class="org-select" @click="open">
        {{ currOrg }}
        <i class="iconfont iconsort-down" style="color: #8C8C8C;"></i>
      </span>
      <div class="ly_flex">
        <mu-date-input
          v-model="params.startTime"
          placeholder="请选择开始日期"
          class="date-select"
          @change="refresh"
          value-format="YYYY-MM-DD"
          container="bottomSheet"
        >
          <i class="iconfont iconsort-down" style="color: #8C8C8C;"></i>
        </mu-date-input>
        <span style="font-size: .2rem;padding: 10px;">-</span>
        <mu-date-input
          v-model="params.endTime"
          placeholder="请选择结束日期"
          class="date-select"
          @change="refresh"
          value-format="YYYY-MM-DD"
          container="bottomSheet"
        >
          <i class="iconfont iconsort-down" style="color: #8C8C8C;"></i>
        </mu-date-input>
      </div>
    </div>
    <mu-container ref="container" class="lan-loadmore-content">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loading="loading"
        @load="load"
        :loaded-all="loadAll"
      >
        <!-- 这里是业务结构 -->
        <ul class="rank-box">
          <li
            class="rank-list flex ly_flex_just_between"
            :class="index <= 2 ? '' : 'ly_flex_just_between'"
            v-for="(item,index) in listData"
            :key="index"
          >
            <div
              v-if="index > 2"
              class="rank-list-r ly_flex ly_flex_ali_center ly_flex_just_end"
              :style="{color: index == 0 ? '#F65933' : index == 1 ? '#B0BAC2' : index == 2 ? '#F19E71' : '#3D3D3D'}"
            >No.{{index + 1}}
            </div>
            <div
              v-if="index <= 2"
              class="rank-list-l ly_flex ly_flex_just_center ly_flex_ali_center"
              style="height: 100%;"
            >
              <img
                v-if="index == 0"
                :src="imgs[0]"
                style="width: .73rem;height: 1.06rem;margin: -.4rem .16rem 0;"
                alt
              />
              <img
                v-if="index == 1"
                :src="imgs[1]"
                style="width: .46rem;height: .69rem;margin: 0 .27rem;"
                alt
              />
              <img
                v-if="index == 2"
                :src="imgs[2]"
                style="width: .45rem;height: .67rem;margin: 0 .29rem;"
                alt
              />
              <!--<div class="list-m-score" style="margin: 0 .25rem;">-->
              <!--<span :style="{color: index == 3 ? '#FF8A1B' : '#FC334E'}">{{item.totalScore}}</span>-->
              <!--<span class="list-m-unit">分</span>-->
              <!--</div>-->
            </div>
            <div class="rank-list-m ly_flex ly_flex_col ly_flex_just_center"
                 :style="{margin: index > 2 ? '0 0.29rem' : '0 0.29rem 0 0'}">
              <div class="list-m-score ly_flex ly_flex_just_between">
                <div>
                  <span class="list-m-name over" style>{{item.userName}}</span>
                </div>
                <div>
                  <span :style="{color: index < 2 ? '#24D90C' : '#FF8A1B' }">{{item.totalScore}}</span>
                  <span class="list-m-unit">分</span>
                </div>
              </div>
              <div class="list-m-user flex ly_flex_ali_center">
                <!-- <span class="list-m-name over" style>{{item.userName}}</span> -->
                <span class="list-m-org over" style>{{item.orgName}}</span>
              </div>
            </div>
            
          </li>
        </ul>
        <p v-if="loadAll && listData.length > 5" class="nodataTips">无更多数据了</p>
      </mu-load-more>
      <NoData v-if="listData.length <= 0 && loaded"/>
    </mu-container>

    <!-- 选项目 -->
    <Org
      ref="org"
      v-if="org.open"
      :open="org.open"
      @close="close"
      v-model="org.res"
      @confirm="confirm"
    ></Org>
  </div>
</template>

<script>
  import Org from "@/select/org/Org.vue";

  export default {
    name: "Ranking",
    components: {
      Org
    },
    props: {},
    data() {
      return {
        api: {
          getRankingApi: "/safety/userScore/rank"
        },
        currOrg: "",
        org: {
          open: false,
          res: []
        },
        params: {
          orgId: "", // 项目id
          type: "", // 组织类别
          startTime: null, // 开始时间
          endTime: "" // 结束时间
        },
        imgs: [
          require("#/assets/img/rank/1.png"),
          require("#/assets/img/rank/2.png"),
          require("#/assets/img/rank/3.png")
        ],
        refreshing: false,
        loading: false,
        loaded: false,
        loadAll: false,
        pageSize: 10,
        pageNo: 0,
        totalPage: 1,
        listData: []
      };
    },
    computed: {},
    created() {
      let orgInfo = this.$A.GS("orgInfo");
      this.params.orgId = orgInfo.orgId;
      this.params.type = orgInfo.type;
      this.currOrg = orgInfo.orgName;
      this.params.startTime = Util.timeForMat(30)[0].substr(0, 10)
      this.params.endTime = Util.timeForMat(30)[1].substr(0, 10)
      this.getData(this.params);
    },
    mounted() {
    },
    watch: {},
    methods: {
      open() {
        this.org.open = true;
      },
      close() {
        this.org.open = false;
      },
      confirm() {
        this.params.orgId = this.org.res[0].value;
        this.currOrg = this.org.res[0].label;
        this.refresh();
        this.org.open = false;
      },
      async refresh() {
        this.refreshing = true;
        this.pageNo = 0;
        this.totalPage = 1;
        this.loaded = false;
        this.loadAll = false;
        this.listData = [];
        this.$refs.container.scrollTop = 0;
        await this.getData(this.params);
        this.refreshing = false;
      },
      search() {
        this.loaded = false;
        this.loadAll = false;
        this.pageSize = 10;
        this.pageNo = 0;
        this.totalPage = 1;
        this.listData = [];
        this.searchcontroll = false;
        this.getData(this.params);
      },
      async getData(params) {
        if (this.pageNo >= this.totalPage) {
          this.loadAll = true;
          return;
        }
        this.$openLoading();
        if (!this.loadAll) {
          this.pageNo += 1;
        } else {
          return;
        }

        let obj = {
          ...params,
          current: this.pageNo,
          size: this.pageSize
        };
        this.$A
          .Go("get", this.api.getRankingApi, obj)
          .then(success => {
            this.$closeLoading();
            if (success.code == 200) {
              let data = success.body.rows || [];
              let total = success.body.page.rows || "0";
              this.totalPage = Math.ceil(total / this.pageSize);
              // let data =  []
              // let total = 0
              if (this.pageNo == 1) {
                this.listData = data;
              } else {
                this.listData.push(...data);
              }
              if (
                total == 0 ||
                Math.ceil(total / this.pageSize) <= this.pageNo ||
                data.length <= 0
              ) {
                this.loadAll = true;
              }
            } else {
              this.listData = [];
            }
            this.loaded = true;
          })
          .catch(err => {
            this.$closeLoading();
            console.warn(err);
          });
      },
      async load() {
        this.loading = true;
        await this.getData(this.params);
        this.loading = false;
      }
    },
    destroyed() {
    }
  };
</script>

<style lang="scss">
  #Ranking {
    .lan-loadmore-content {
      padding: 0;
    }
    .select-box {
      padding: 0 14px;
      background: #fff;
      .org-select {
        margin-top: 0.1rem;
        display: inline-block;
        padding: 0.08rem 0.12rem;
        background: rgba(248, 248, 248, 1);
        border-radius: 0.02rem;
        font-size: 0.12rem;
        font-weight: 500;
        color: #3d3d3d;
        line-height: 0.17rem;
      }
      .date-select {
        margin-top: 0.1rem;
        padding: 0.08rem 0.12rem;
        background: rgba(248, 248, 248, 1);
        border-radius: 0.02rem;
        font-size: 0.12rem;
        color: #3d3d3d;
        min-height: 0;
        line-height: 0.17rem;
        .mu-text-field {
          height: 0.17rem;
        }
      }
    }

    .rank-box {
      padding: 20px 14px 14px;
      background: #fff;
      overflow: auto;
    }

    .rank-list {
      height: 1.05rem;
      margin-bottom: 0.1rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0rem 0.02rem 0.08rem 0rem rgba(182, 182, 182, 0.4);
      border-radius: 0.04rem;
      .list-m-score {
        font-size: 0.31rem;
        margin-bottom: 0.05rem;
        font-weight: bold;
        /*color: rgba(36, 217, 12, 1);*/
        line-height: 0.36rem;
        .list-m-unit {
          margin-left: 0.05rem;
          font-size: 0.11rem;
          color: rgba(61, 61, 61, 1);
          line-height: 0.16rem;
        }
        .list-m-name {
            max-width: 0.6rem;
            color: rgba(61, 61, 61, 1);
            font-size:0.16rem;
          }
      }
      .rank-list-m {
        width: 3rem;
        .list-m-user {
          font-size: 0.15rem;
          line-height: 0.21rem;
          
          .list-m-org {
            -max-width: 1.2rem;
            width:100%;
            color: rgba(140, 140, 140, 1);
          }
        }
      }
      .rank-list-r {
        margin-left: 0.34rem;
        font-size:0.2rem;
        color:#000;
        font-weight: 600;
      }
    }
  }
</style>
